// 整个项目的公共样式
// 覆盖vant自带导航栏的样式
.van-nav-bar {
    background-color: #3196fa;
    .van-nav-bar__title ,.van-icon{
      color: #fff;
    }
  }

  #app{
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  // .container是Layout.vue组件的根元素的类名
.container{
  width: 100%;
  height: 100%;
  // logo区域
  .logo {
    background: url("../assets/logo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 80px;
    }
  }

  // .index 是home/index.vue组件的根元素的类名
.index {
  height: 100%;
  // 让出顶部导航条的距离
  padding-top:46px;

  .van-tabs__wrap {
    position:fixed;
    top:46px;
    left:0px;
    right:30px; 
  }
  // 让出van-tabs的高度
  .van-tabs--line{
    padding-top:50px; 
  }
  .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    .van-tabs__content {
      flex:1;
      overflow: hidden;
      // 能看到文章列表中的loading效果
      padding-bottom: 4rem; 
    }
    .van-tabs__line {
      width: 30px !important;
      background-color: #3296fa;
      bottom: 20px;
    }
  }
  .van-tab__pane{
    height: 100%;
}
// .scroll-wrapper是home/ArticleList.vue组件的根元素的类名
.scroll-wrapper{
  overflow:auto;
  height: 100%;
}

// 频道管理的开关按钮
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index:1;
  .van-icon-wap-nav{
    font-size: 20px;
  }
}
}